.el-splitter {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%
}

.el-splitter__mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999
}

.el-splitter__mask-horizontal {
    cursor: ew-resize
}

.el-splitter__mask-vertical {
    cursor: ns-resize
}

.el-splitter__horizontal {
    flex-direction: row
}

.el-splitter__vertical {
    flex-direction: column
}

.el-splitter-bar {
    flex: none;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.el-splitter-bar__dragger {
    background: transparent;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

.el-splitter-bar__dragger:after,
.el-splitter-bar__dragger:before {
    background-color: var(--el-border-color-light);
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.el-splitter-bar__dragger:not(.is-lazy):after {
    display: none
}

.el-splitter-bar__dragger:after {
    opacity: .4
}

.el-splitter-bar__dragger:hover:not(.is-disabled):before {
    background-color: var(--el-color-primary-light-5)
}

.el-splitter-bar__dragger-horizontal:after,
.el-splitter-bar__dragger-horizontal:before {
    height: 100%;
    width: 2px
}

.el-splitter-bar__dragger-vertical:after,
.el-splitter-bar__dragger-vertical:before {
    height: 2px;
    width: 100%
}

.el-splitter-bar__dragger-active:after,
.el-splitter-bar__dragger-active:before {
    background-color: var(--el-color-primary-light-3)
}

.el-splitter-bar__dragger-active.el-splitter-bar__dragger-horizontal:after {
    transform: translate(calc(-50% + var(--el-splitter-bar-offset)), -50%)
}

.el-splitter-bar__dragger-active.el-splitter-bar__dragger-vertical:after {
    transform: translate(-50%, calc(-50% + var(--el-splitter-bar-offset)))
}

.el-splitter-bar:hover .el-splitter-bar__collapse-icon {
    opacity: 1
}

.el-splitter-bar__collapse-icon {
    align-items: center;
    background: var(--el-border-color-light);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    opacity: 0;
    position: absolute;
    z-index: 9
}

.el-splitter-bar__collapse-icon:hover {
    background-color: var(--el-color-primary-light-5);
    opacity: 1
}

.el-splitter-bar__horizontal-collapse-icon-start {
    height: 24px;
    left: -12px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px
}

.el-splitter-bar__horizontal-collapse-icon-end {
    height: 24px;
    left: 12px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px
}

.el-splitter-bar__vertical-collapse-icon-start {
    height: 16px;
    right: 50%;
    top: -12px;
    transform: translate(50%, -50%);
    width: 24px
}

.el-splitter-bar__vertical-collapse-icon-end {
    height: 16px;
    right: 50%;
    top: 12px;
    transform: translate(50%, -50%);
    width: 24px
}